<template>
  <div>
    <div class="top-title">
      <span class="tinyTitle">
        <div class="titleFlag"></div>
        {{ "招聘变化趋势" }}
      </span>
    </div>
    <div class="top-line"></div>

    <div class="regionSalaryContent">
      <div class="echart" v-if="activeName == 'chart'">
        <div class="regionLineChart">
          <recruitHeatLineChart />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import recruitHeatLineChart from "@/views/position/components/recruitHeatLineChart";

export default {
  name: "recruit_heat",
  components: { recruitHeatLineChart },
  data() {
    return {
      activeName: "chart",
    };
  },
  created() {},
  mounted() {},
  methods: {},
};
</script>

<style scoped lang="scss">
.top-title {
  display: flex;
  margin: 20px 40px 10px 0px;
}
.tinyTitle {
  display: flex;
  align-items: center;
  font-size: 18px;
  color: #222;
  font-weight: bold;
  margin-right: 40px;

  .titleFlag {
    width: 5px;
    height: 15px;
    border-radius: 3px;
    background: #4880ff;
    margin-right: 12px;
  }
}
.top-line {
  height: 1px;
  background-color: #cfd8f5;
  margin: -24px 0px 20px 140px;
}
.regionSalaryContent {
  position: relative;
  display: flow-root;
  margin-top: 20px;
  // max-height: calc(100vh - 192px);
  // overflow-y: scroll;

  // padding-right: 56px;
  &::-webkit-scrollbar {
    width: 4px;
    background-color: #fff;
    border-radius: 4px;

    height: 4px;
  }
  &::-webkit-scrollbar-thumb {
    background-color: #d8d8d8;
    border-radius: 4px;
  }
}
.regionLineChart {
  display: flex;
  align-items: center;
  width: 100%;
}
.regionLineChart {
  flex: 1;
}
</style>
